Clone the Project Repository

This lab requires multiple HTML interface files, which have been pre-created for you. You will need to clone the folder structure to the IDE interface using the following command in a terminal shell.

1
git clone https://github.com/ibm-developer-skills-network/obmnl-flask_assignment.git

When the command is successfully executed, the Project tab must have the folder structure as shown in the image. The root folder, obmnl-flask_assignment should have the templates folder and a file app.py. The templates folder has all the required HTML files, edit.html, form.html, and transactions.html. Throughout this lab, you will implement the required functions in app.py.

Initial set up

In the app.py file, you need to import necessary modules from Flask and instantiate the Flask application.
For this lab, you will need to import the following functions from the flask library.

Flask - to instantiate the application
request - to process the GET and POST requests
url_for - to access the url for a given function using its decorator
redirect - to redirect access requests according to requirement
render_template - to render the html page

After importing the functions, instantiate the application to a variable app.

Click here for hint

1
from flask import <functions>

Click here for solution

1
2
3
4
5
# Import libraries
from flask import Flask, redirect, request, render_template, url_for
# Instantiate Flask functionality
app = Flask(__name__)

Now, the code will look like this:
Correct code reference

Next, let's create a list of sample transactions for testing purposes. You can assume that the transactions already exist on the interface when it is executed for the first time. Please note that this step is completely optional and does not affect the functionality you will develop in this lab. Add the code snippet as shown below to app.py.

1
2
3
4
5
6
# Sample data
transactions = [
    {'id': 1, 'date': '2023-06-01', 'amount': 100},
    {'id': 2, 'date': '2023-06-02', 'amount': -200},
    {'id': 3, 'date': '2023-06-03', 'amount': 300}
]

Click here for solution

Sample data

The order in which you will develop the functions is as follows:
1. Read
2. Create
3. Update
4. Delete
The reason to implement Read before the other functions is to be able to redirect to the page with all transactions every time a new transaction is created, updated, or deleted. Therefore, the function to read the existing transactions must exist before the others are implemented.

Create Operation

For the Create operation, you will implement a route that allows users to add new transactions. This will involve handling both GET and POST HTTP requests - GET for displaying the form to the user and POST for processing the form data sent by the user.

Here is the list of steps to implement the Create operation.

Create a function named add_transaction.
Use add as the decorator for this function. Make sure to pass both GET and POST as possible methods.
If the request method is GET, use the render_template function to display an HTML form using a template named form.html. This form will allow users to input data for a new transaction.
If the request method is POST, use request.form to extract the form data, create a new transaction, append it to the transactions list, and then use redirect and url_for to send the user back to the list of transactions.
The new transaction is passed on to the reading function in the following format.

1
2
3
4
5
transation = {
              'id': len(transactions)+1
              'date': request.form['date']
              'amount': float(request.form['amount'])
             }

Here, request.form function parses the information received from the entry made in the form.

Click here for hint

The add_transaction function content needs the following implementations.

For POST method, create the new transaction as shown above, append it to the existing list of transactions and redirect to the URL for Read operation.

For GET method, render the form.html page that accepts the information from the interface.

Click here for solution

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Create operation: Display add transaction form
# Route to handle the creation of a new transaction
@app.route("/add", methods=["GET", "POST"])
def add_transaction():
    # Check if the request method is POST (form submission)
    if request.method == 'POST':
        # Create a new transaction object using form field values
        transaction = {
            'id': len(transactions) + 1,            # Generate a new ID based on the current length of the transactions list
            'date': request.form['date'],           # Get the 'date' field value from the form
            'amount': float(request.form['amount']) # Get the 'amount' field value from the form and convert it to a float
        }
        # Append the new transaction to the transactions list
        transactions.append(transaction)
        # Redirect to the transactions list page after adding the new transaction
        return redirect(url_for("get_transactions"))
    
    # If the request method is GET, render the form template to display the add transaction form
    return render_template("form.html")

Now, the code will look like this:
Correct code

Note: The statements outside the if case are, by default, the else case. The statements in the if case end with a return statement; hence only one of the two cases will run at a time.

Update Operation

For the Update operation, you need to implement a route that allows users to update existing transactions. You'll again handle both GET and POST HTTP requests - GET for displaying the current transaction data in a form, and POST for processing the updated data sent by the user.

Complete the following steps to implement the Update operation.

Create a function named edit_transaction that handles both GET and POST requests. This function should accept a parameter, transaction_id.
Decorate the function with @app.route and use the route string /edit/<int:transaction_id>. The <int:transaction_id> part in the URL is a placeholder for any integer. Flask will pass this integer to your function as the transaction_id argument.
If the request method is GET, find the transaction with the ID that matches transaction_id and use render_template to display a form pre-populated with the current data of the transaction using a template named edit.html.
If the request method is POST, use request.form to get the updated data, find the transaction with the ID that matches transaction_id and modify its data, then redirect the user back to the list of transactions.

Click here for solution

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# Update operation: Display edit transaction form
# Route to handle the editing of an existing transaction
@app.route("/edit/<int:transaction_id>", methods=["GET", "POST"])
def edit_transaction(transaction_id):
    # Check if the request method is POST (form submission)
    if request.method == 'POST':
        # Extract the updated values from the form fields
        date = request.form['date']           # Get the 'date' field value from the form
        amount = float(request.form['amount'])# Get the 'amount' field value from the form and convert it to a float
        # Find the transaction with the matching ID and update its values
        for transaction in transactions:
            if transaction['id'] == transaction_id:
                transaction['date'] = date       # Update the 'date' field of the transaction
                transaction['amount'] = amount   # Update the 'amount' field of the transaction
                break                            # Exit the loop once the transaction is found and updated
        # Redirect to the transactions list page after updating the transaction
        return redirect(url_for("get_transactions"))
    
    # If the request method is GET, find the transaction with the matching ID and render the edit form
    for transaction in transactions:
        if transaction['id'] == transaction_id:
            # Render the edit form template and pass the transaction to be edited
            return render_template("edit.html", transaction=transaction)
    # If the transaction with the specified ID is not found, handle this case (optional)
    return {"message": "Transaction not found"}, 404

Now, the code will look like this:
Correct code reference

Note: There may be multiple ways of achieving the same result. Please use the solution given above only as a reference.

Finishing Steps and Running the Application

Check if the current script is the main program (that is, it wasn't imported from another script) with the conditional if __name__ == "__main__":.

If the condition is true, call app.run(debug=True) to start the Flask development server with debug mode enabled. This will allow you to view detailed error messages in your browser if something goes wrong.

1
2
3
# Run the Flask app
if __name__ == "__main__":
    app.run(debug=True)

Now, the code will look like this:
Correct code reference

The code is now complete. Run the file app.py from a terminal shell using the command:

1
python3.11 app.py

By default, Flask launches the application on LocalHost:5000. As displayed in the image,

Launch the application by going to the Skills Network Library, going to Launch Application.
Enter 5000 in the port number and launch the application window.

The final application looks like this.

ezgif com-video-to-gif

Date	Version	Changed by	Change Description
2023-07-24	2.0	Steve Hord	QA pass with edits
2023-07-15	1.0	Vicky Kuo	Initial version created

Hands-on Lab: CRUD Application Design using Additional Features in Flask

Overview

Objectives

Clone the Project Repository

Initial set up

Read Operation

Create Operation

Update Operation

Delete Operation

Finishing Steps and Running the Application

Lab Help

Testing the Interface

Practice Exercises

Exercise 1: Search Transactions

Exercise 2: Total Balance

Conclusion

Author(s)

Additional Contributor

Changelog

© IBM Corporation 2023. All rights reserved.